<script>
	import Carousel from '$components/business/carousel/carousel.svelte';
	import { browser } from '$app/environment';
	// import Product from '$components/business/product/product.svelte';

	// let carousel; // for calling methods of the carousel instance

	export let data = [];
</script>

{#if browser}
	{#each data as item, index (item.title)}
		<div class="w-full flex flex-col items-center h-322px mb-30px">
			<div
				class="w-1320px part-title emphasize-text title line-height-42px font-size-24px indent-1.5em bg-gray-2"
			>
				{item.title}
			</div>
			<Carousel
				bind:images={item.items}
				len={6}
				style="--item-width: 220px; --item-height: 280px"
				itemStyle="padding: 10px"
				showCursor={false}
				showArrows="outside"
				on:clickItem={() => {}}
			/>
		</div>
	{/each}
{/if}
